* {
    padding: 0;
    margin: 0;
    border: none;
    list-style: none;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    font-size: 10px;
}

#body {
    width: 100%;
    height: 100%;
    min-width: 1300px;
    overflow: auto;
    // background-color: #101F54;
    
    background: radial-gradient(#175ad4 0%, #101F54 35%);
    // background: linear-gradient(-45deg, #042C4F, #024D6C);
    // background: radial-gradient(#175ad4 0%, #073687 35%);
    color: #ffffff;
}

// #navigation {
//     position: fixed;
//     right: 10px;
//     top: 100px;
//     color: #ffffff;
//     font-size: 0.8rem;
// }

#header {
    position: relative;
    float: left;
    width: 100%;
    height: 10%;

    &-left {
        position: absolute;
        top: 0; 
        left: 0;
        width: 40%;
        height: 100%;
        padding-left: 15px;

        &-top {
            position: relative;
            width: 100%;
            height: 50%;
            overflow: hidden;
        }

        &-bottom {
            position: relative;
            width: 100%;
            height: 50%;
        }
    }

    &-right {
        position: absolute;
        top: 0; 
        right: 0;
        width: 40%;
        height: 100%;
        padding-right: 15px;

        &-top {
            position: relative;
            width: 100%;
            height: 50%;
            overflow: hidden;
        }

        &-bottom {
            position: relative;
            width: 100%;
            height: 50%;

            .naviga-item:first-child {
                margin-left :55px;
            }

            .naviga-item {
                position: relative;
                float: left;
                width: 145px;
                text-align: center;
                border-radius: 5px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                background-color: #101F54;
                border: 3px solid #073687;
                color: #0ba6fd;
                transform: skew(-40deg);
                margin-right: 5px;
                transition: all 0.5s;
                box-sizing: content-box;
                padding: 1% 0;

                &:hover {
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                    transform: skew(0deg) translateX(-20px) scale(1.1);
                }

                &-title {
                    transform: scale(0);
                    transition: all 0.5s;
                }
            }
        }
    }

    #logo {
        position: relative;
        width: 20%;
        height: 100%;
        text-align: center;
        margin: 0 auto;
        overflow: hidden;

        h2 {
            position: absolute;
            width: 100%;
            top: 25%;   
            color: #ffffff;
        }
    }
}

#top {
    float: left;
    width: 100%;
    height: 56%;

    &-left {
        float: left;
        width: 25%;
        height: 100%;
        padding-left: 10px;
    }

    &-main {
        position: relative;
        float: left;
        width: 50%;
        height: 100%;

        &-mess {
            position: absolute;
            width: 20%;
            height: 70%;
            right: 7%;
            top: 15%;
        }
    }

    &-right {
        float: left;
        width: 25%;
        height: 100%;

        &-top {
            position: relative;
            width: 100%;
            height: 15%;
            padding-right: 10px;
        }

        &-middle {
            position: relative;
            width: 100%;
            height: 35%;
            padding-right: 10px;
        }

        &-bottom {
            position: relative;
            width: 100%;
            height: 50%;
            padding-right: 10px;
        }
    }
}

#bottom {
    position: relative;
    float: left;
    width: 100%;
    height: 34%;
    padding: 5px 10px;

    &-first,
    &-second,
    &-third,
    &-fourth {
        float: left;
        height: 100%;
    }

    &-first {
        width: 20%;
    }
    
    &-second {
        width: 40%;
    }
    
    &-third {
        width: 25%;
    }
    
    &-fourth {
        width: 15%;
    }
}

.box {
    &-center {
        width: 100%;
        height: 100%;
        padding: 15px 10px;
    }

    &-title {
        position: absolute;
        top: 15px;
        left: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;

        .svg-icon {
            float: left;
            width: 20px;
            height: 20px;
            margin: 3px 10px 0;
        }
    }

    &-text {
        float: left;
        height: 100%;
        color: #DCDFE6;
        font-weight: bold;
    }

    &-body {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 30px 8px 0;
    }
}

.data {
    &-top {
        position: absolute;
        color: #ffffff;
        width: 50px;
        height: 20px;
        margin-left: -25px;
        text-align: center;
        line-height: 20px;
    }
}

select {
    outline: none;
    width: 190px;
    height: 30px;
    padding: 0 10px;
    border: 3px solid #073687;
    background-color: #101F54;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #04a4d2;

    &:hover {
        box-shadow: 0 2px 8px 0 rgb(23, 90, 212);
    }
}

@keyframes bordershow {
    0% {
        box-shadow: 0 2px 4px 0 rgb(23, 90, 212);
    }
    20% {
        box-shadow: 0 2px 6px 0 rgb(23, 90, 212);
    }
    40% {
    }
    60% {
        box-shadow: 0 2px 10px 0 rgb(23, 90, 212);
    }
    80% {
        box-shadow: 0 2px 8px 0 rgb(23, 90, 212);
    }
    100% {
        box-shadow: 0 2px 6px 0 rgb(23, 90, 212);
    }
}

// #box {
//     &-seven {
//         width: 100%;
//         height: 100%;
//         padding: 8% 3%;
//     }
// }

// .box-seven-item {
//     width: 100%;
//     height: 32px;
//     line-height: 32px;
//     margin-bottom: 5px;
//     text-align: center;

//     .icon, .title, .value, .unit {
//         float: left;
//         height: 100%;
//         // border: 1px solid red;
//     }

//     .icon {
//         width: 20%;
//     }

//     .title {
//         width: 30%;
//         border-radius: 6px;
//         border: 3px solid #175ad4;
//         color: #ffffff;
//         line-height: 26px;
//         font-weight: bold;
//     }

//     .value {
//         width: 25%;
//         color: #7ec699;
//         font-size: 20px;
//         font-weight: bold;
//     }

//     .unit {
//         width: 25%;
//         color: #7ec699;
//         font-size: 20px;
//         font-weight: bold;
//     }
// }
